<template>
    <div class="order-page">
        <div class="boxs">
            <!-- 商品列表 -->
             
            <van-list 
                v-if="list.length>0"
                :finished="finished"
                v-model="loading"							 
                :error.sync="error" 
                :offset="50"
                :immediate-check="false"
                :finished-text="$i18n.t('default.other.noMore')"
                :error-text="$i18n.t('default.other.errorTip')"
                @load="onLoad"			
            >
           
                <div class="box" v-for="(item,index) in list" :key="index">
                    <div class="box-top">
                        <van-image class="product-img"  flt="cover" :src="item.goodsImages?$store.state.imageHost+item.goodsImages[0].url:require('../../assets/image/notImg.png')"></van-image>
                        <div class="right">
                            <div class="title value">{{item.goodsName}}</div>
                            <!-- <div class="price">${{item.ordersPriceUnit}}/包</div> -->
                            <div class="num value">{{  $i18n.t('default.order.quantity') }}: {{item.ordersNum}}包</div>
                            <div class="value">{{  $i18n.t('default.order.payAmount') }}:${{item.ordersPrice}}</div>
                        </div>
                    </div>
                    <div class="box-bottom">
                        <div class="clear-order">{{ formatDate(item.createTime) }}</div>
                        <!-- <van-count-down v-if="item.ordersState == 1" class="clear-order" :time="item.time" format="DD 天 HH 时 mm 分 ss 秒" /> -->
                        <!-- <div >已完成</div> -->
                        <div v-if="item.ordersState == 2">{{  $i18n.t('default.order.completed') }}</div>
                        <div v-if="item.ordersState == 3">{{  $i18n.t('default.order.refund') }}</div>
                        <div v-if="item.ordersState == 4">{{  $i18n.t('default.order.invalid') }}</div>
                        <div></div>
                        <!-- <van-button v-if="item.ordersState == 1" round class="btn" @click="deleteOrder(item,index)">取消订单</van-button> -->
                    </div>
                </div>
                
            </van-list>
            <!-- 商品列表 --> 
        </div>
    </div>
    </template>
     
    <script>
    import {formatDate} from '@/utils/date';
    export default {
        name: '',
        props: {
        },
        
        data () {
            return {
                list: [],
                page: 1,
                limit: 10,
                error: false,
                finished: false,
                loading: false,
            }
        },
        created(){
            this.init();
        },
        mounted() {
     
        },
        methods: {
            formatDate(time) {
                if(!time){
                return '----'
                }
                time = parseInt(time)
                var date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
            },
            deleteOrder(item,index){
                this.$dialog.confirm({
                    message: this.$i18n.t('default.order.canceltip'),
                    confirmButtonText: this.$i18n.t('default.other.confirm'),
                    showCancelButton:true,
                    cancelButtonText:this.$i18n.t('default.other.cancel'),
                    confirmButtonColor:'#bf1c16',
                }).then((res)=>{
                    if(res){
                        this.$api.post(this.$url.orders.cancle, {
                            ordersID: item.ordersID
                        })
                        .then(res => {
                            if (res.code == "SUCCESS") {
                                this.list.splice(index,1);
                                this.$toast.success(this.$i18n.t('default.order.cancelSuccess'));
                            }
                        }).catch(error => {
                            this.error = true;
                        });
                    }
                }).catch((res) => {
                    
                });
            },
            init(){
                this.$api.get(this.$url.orders.orders, {
                    page:this.page,
                    limit:10
                })
                .then(res => {
                    if (res.code == "SUCCESS") {
                        this.loading = false;
                        for(let i in res.data.content){
                            let arr = [];
                            res.data.content[i].goodsImages = res.data.content[i].goodsImages.split(',');
                            for(let j in res.data.content[i].goodsImages){
                            if(res.data.content[i].goodsImages[j]){
                                arr.push(JSON.parse(res.data.content[i].goodsImages[j]));
                                }
                            }
                            res.data.content[i].goodsImages = arr[0];
                            console.log('res.data.content[i].goodsImages:',res.data.content[i].goodsImages)

                        }
                        this.numberOfElements = res.data.totalElements;
                        this.list.push(...res.data.content);
                        if (res.data.content.length < 10) {
                            this.finished = true;
                        } else {
                            this.finished = false;
                        }
                    }
                }).catch(error => {
                    this.error = true;
                });
            }, 
            onLoad(){
                this.page += 1;
                if (this.page > 1) {
                    this.init();
                }
            },
        },
    }
    </script>
     
    <style scoped lang='scss'>
    .order-page{
        background: url('../../assets/image/my-bg.png') no-repeat;
        min-height: 100vh;
    }
    .box{
        display: flex;
        flex-direction: column;
        height: 3.3rem;
        background: #fff;
        padding: .3rem;
        margin-bottom: .2rem;
        
        .box-top{
            display: flex;
            box-sizing: border-box;
            .product-img{
                width: 2.2rem;
                height: 2.1rem;
                border-radius: .1rem;
                margin-right: .3rem;
            }
            .price{
                margin-top: .18rem;
            }
            .title{
                font-size: .36rem;
                display: -webkit-box;          /* 弹性伸缩盒子模型 */
                -webkit-line-clamp: 2;         /* 限制显示行数 */
                overflow: hidden;              /* 隐藏超出部分 */
                text-overflow: ellipsis; 
            }
            .right{
                flex: 1;
                .value{
                    color: #646464;
                }
            }
        }
        .box-bottom{
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            margin-top: .25rem;
            .clear-order{
                
            }
            .btn{
                width: 1.8rem;
                height: .6rem;
            }
            .status{
                color: #646464;
            }
        }
      
    }
    </style>